<template>
  <div class="app-container">
    <div class="btnCss">
      <el-tabs v-model="active" @tab-click="handleClick">
        <el-tab-pane label="待办任务" name="first">
          <inter-todo v-if="active == 'first'"></inter-todo>
        </el-tab-pane>
        <el-tab-pane label="已办任务" name="second">
          <inter-finished v-if="active == 'second'"></inter-finished>
        </el-tab-pane>
        <el-tab-pane  v-if="checkPermi(['workflow:Internet:manage'])"  label="互联网地址及端口申请管理" name="third">
          <inter-gather v-if="active == 'third'"></inter-gather>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import InterTodo from './components/InterTodo.vue';
import InterFinished from './components/InterFinished.vue';
import InterGather from './components/InterGather.vue';

export default {
    name:'Internet',
    components: {
      InterTodo,
      InterFinished,
      InterGather
    },
  data() {
    return {
       active:'first'
    };
    },
    mounted() {
        // 获取按钮元素数组中第一个.click()
  },
  methods: {
    
    handleClick(tab, event) {
      this.active = tab.name
    }
  }
};
</script>
